#{extends 'main.html' /}
#{set title:'Your lists' /}


<h1>My decks</h1>


#{ifnot decks}
<p class="info">
    You don't have any decks yet. <a href="@{Decks.blank()}">Create your first deck</a>
</p>
#{/ifnot}

<script type="text/javascript">
    function deletedeck_confirm(type, name, url) {
        var name = confirm("Are you sure you want to delete the " + type + " '" + name + "'?")
        if (name == true) {
            window.location = url
        }
    }
</script>


<table width="100%">
    #{list items:decks, as:'deck'}
    <tr>
        <td width="45%">
            <ul>
                <li>${deck.name}</li>
            </ul>

        </td>
        <td width="55%" align="left">
            <p>
                <a href="@{Games.create(deck.id)}" class="action">Create Game</a>
                <a href="@{Decks.edit(deck.id)}" class="action">Edit deck</a>
                <a href="@{Decks.show(deck.id)}" class="action">Edit cards</a>
            </p>

            <p>
                <a href="@{Decks.export(deck.id)}" class="action">Export deck</a>
                <a href="#" onclick="deletedeck_confirm('deck','${deck.name}', '@{Decks.delete(deck.id)}')"
                   class="action">Delete</a>
            </p>
        </td>
    </tr>
    #{/list}
</table>


<p>
    <a href="@{Decks.blank()}" class="action">Create new deck</a>
</p>


#{if uncompletedGames}

<p></p><p></p>

<h1>My ongoing games <span class="more"></span></h1>


<table border="0" width="100%">
    #{list items:uncompletedGames, as:'game'}
    <tr>
        <td width="45%">
            <ul>
                <li>${game.name}</li>
            </ul>
        </td>
        <td width="55%" align="left">
            <a href="@{Games.show(game.id)}" class="action">Resume</a>
            <a href="#" onclick="deletedeck_confirm('game','${game.name}', '@{Games.delete(game.id)}')" class="action">Delete
                game</a>
        </td>
    </tr>
    #{/list}
</table>

#{/if}